<template>
  <div
    v-loading="loading"
    class="app-container"
  >

    <el-row :gutter="20">
      <el-col :span="4">
        <el-card class="left-tree">
          <el-tree
            ref="tree"
            icon-class="el-icon-folder"
            :data="departTree"
            :props="{ label: 'name' }"
            node-key="id"
            @current-change="seleatTree"
          />
        </el-card>
      </el-col>
      <el-col
        :span="20"
        class="el-right"
        style="padding-left: 0; padding-right: 0;"
      >
        <div class="header">
          <p>作业范围</p>

          <el-tooltip
            content="点击编辑释放绘制电子围栏功能"
            placement="top"
          >
            <el-button
              v-if="!isEditing"
              class="el-edit"
              @click="isEditing=true"
            >
              <span @click="toggeidt">编辑</span>
            </el-button>

            <div v-else>
              <el-tooltip
                content="点击保存上传绘制好的电子围栏"
                placement="top"
              >
                <el-button
                  class="el-edit"
                  style="margin-right: 6px;"
                  @click="saveChanges"
                >
                  <span style="color:#fff">提交</span>
                </el-button>
              </el-tooltip>
              <el-button
                class="el-span"
                style="background-color:#fff; background-color:#ffeeeb:hover; border: 1px solid #d8dde3; border: 1px solid #f3917c:hover"
                @click="cancelEditing"
              >
                <span style="color:black;color:#e15536:hover">取消</span>
              </el-button>
            </div>
          </el-tooltip>
        </div>
        <el-row class="el-key">
          <el-col
            :span="24"
            style="background-color:#fff"
          >
            <span>地区关键词:</span>
            <el-input
              v-model="inputs"
              style="width:20%; margin-left: 15px;"
              placeholder="请输入地区关键词"
              @input="inputfz"
            />
            <bm-control>
              <button
                v-if="showStart"
                class="draw"
                @click="toggle('polyline')"
              >{{ polyline.editing ? '完成绘制' : '开始绘制' }}</button>
              <button
                v-if="polyline.editing"
                class="upload"
                @click="upload"
              >删除围栏</button>
              <el-alert
                v-if="showStart"
                style="margin-top: 20px;"
                title="点击或拖动鼠标绘制作业范围,右击鼠标结束图形绘制,图形不可有交叉点。完成绘制后,点击提交按钮保存。每个机构仅可支持绘制一个作业范围"
                type="warning"
                show-icon
                closable
              />
            </bm-control>
            <div style="margin-top:10px;">
              <!-- scroLL-wheeL-zoom = true 代表可以缩放
              inertiaL-dragging 允许惯性拖拽
              inertiaL-dragging -->
              <baidu-map
                :center="{lng: longitude, lat: latitude}"
                :zoom="14"
                scroll-wheel-zoom="true"
                inertia-l-dragging
                @mousemove="syncPolyline"
                @click="paintPolyline"
                @rightclick="newPolyline"
              >

                <bm-view class="map" />

                <bm-local-search
                  :keyword="keyword"
                  :auto-viewport="true"
                  :panel="false"
                />
                <!-- <bm-polyline
                  v-for="path of polyline.paths"
                  :path="path"
                  :stroke-color="polylineStrokeColor"
                  :stroke-weight="polylineStrokeWeight"
                  :stroke-style="polylineStrokeStyle"
                /> -->
                <!-- 绘制图形
                stroke-style 绘制图形的样式
                stroke-color 绘制图形的颜色
                stroke-weight 绘制图形边框的粗细
                fill-color 绘制图形的背景颜色
                -->
                <!-- v-if="showPolygon" -->
                <bm-polygon
                  v-for="path of polyline.paths"
                  :key="path"
                  :path="path"
                  :stroke-style="polygonStrokeStyle"
                  :stroke-color="polygonStrokeColor"
                  :stroke-weight="polygonStrokeWeight"
                  :fill-color="polygonFillColor"
                />
              </baidu-map>
            </div>
            <vue-Aamp />
          </el-col>

        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { getDepartTree } from '@/api/base'
import { transListToTreeData } from '@/utils'
import { getBidByIdApi } from '@/api/transit'
export default {

  data() {
    return {
      closable: true,
      longitude: '123.162626',
      latitude: '41.2669',
      polygonStrokeColor: '#e15536',
      polygonStrokeWeight: 1,
      polygonStrokeStyle: 'dashed',
      polygonFillColor: '#f2c8c5',
      showPolygon: true,
      showStart: false,
      inputs: '',
      keyword: '',
      polyline: {
        editing: false,
        paths: []
      },
      isEditing: false, // 初始状态为非编辑状态
      input: '',
      loading: false,
      departTree: []

    }
  },
  created() {
    this.getDepartTree()
    this.getProvinceList() // 获取省份列表
  },

  methods: {

    inputfz() {
      this.keyword = this.inputs
    },
    async getDepartTree() {
      this.departTree = transListToTreeData(
        JSON.parse(await getDepartTree()),
        '0'
      )
      console.log(this.departTree)
      // 选择第一个节点
      this.currentNode = this.selectFirstNode(this.departTree)
      this.$refs.tree.setCurrentKey(this.currentNode.id) // 选中某个节点
      this.queryDetail() // 查询详情id
    },
    selectFirstNode(arr) {
      let node = null
      if (arr[0].children && arr[0].children.length) {
        node = this.selectFirstNode(arr[0].children)
      } else {
        node = arr[0]
      }
      return node
    },
    saveChanges() {
      // 保存更改的逻辑...
      this.isEditing = false // 保存后切换回非编辑状态
    },
    cancelEditing() {
      // 取消编辑的逻辑...
      this.isEditing = false // 取消后切换回非编辑状态
      this.showStart = false
      this.polyline.editing = false
    },
    toggle(name) {
      this[name].editing = !this[name].editing
    },
    upload() {
      this.polyline.editing = false
      this.showPolygon = false
    },
    toggeidt() {
      this.showStart = true
    },
    syncPolyline(e) {
      if (!this.polyline.editing) {
        return
      }
      const { paths } = this.polyline
      if (!paths.length) {
        return
      }
      const path = paths[paths.length - 1]
      if (!path.length) {
        return
      }
      if (path.length === 1) {
        path.push(e.point)
      }
      this.$set(path, path.length - 1, e.point)
    },
    newPolyline(e) {
      if (!this.polyline.editing) {
        return
      }
      const { paths } = this.polyline
      if (!paths.length) {
        paths.push([])
      }
      const path = paths[paths.length - 1]
      path.pop()
      if (path.length) {
        paths.push([])
      }
    },
    paintPolyline(e) {
      if (!this.polyline.editing) {
        return
      }
      const { paths } = this.polyline
      !paths.length && paths.push([])
      paths[paths.length - 1].push(e.point)
    },
    async getBidById() {
      await getBidByIdApi()
    },
    seleatTree(data, type, params) {
      // console.log(data)
      this.longitude = data.longitude
      this.latitude = data.latitude
      // console.log(data.id)
      // console.log(data.type)
    }
  }
}
</script>

<style lang="scss" scoped>
.bm-view {
  width: 100%;
  height: 600px;
}
.map {
  width: 100%;
  height: 600px;
}
.upload {
  display: inline-block;
  background-color: #fff;
  width: 90px;
  height: 35px;
  align-items: baseline;
  border-radius: 5px;
  font-weight: 400;
  border: 1px solid #d8dde3;
  margin-top: 15px;
  font-size: 14px;
  color: #8c919d;
}
.upload:hover {
  background-color: #ecf5ff;
}
.draw {
  display: inline-block;
  background-color: #ffeeeb;
  width: 90px;
  height: 35px;
  align-items: baseline;
  border-radius: 5px;
  font-weight: 400;
  border: 1px solid #e15536;
  margin-right: 20px;
  margin-top: 15px;
  font-size: 14px;
  color: #e15536;
}
.draw:hover {
  background-color: #ff6b4a;
  color: #fff;
}
.container-card:not(:first-child) {
  margin-top: 20px;
}
.app-container {
  .el-right {
    background-color: #fff;
  }

  ::v-deep .el-tree-node__content {
    height: 40px;
    .el-tree-node__expand-icon {
      color: #419eff;
    }
    .el-tree-node__expand-icon.is-leaf {
      color: transparent;
      cursor: default;
    }
  }
  .el-key {
    padding: 25px;
  }

  .header {
    display: flex;
    justify-content: space-between;
    background-color: #f8faff;
    padding-left: 25px;
    height: 60px;
    p {
      // margin: 0;
      margin-top: 20px;
      font-size: 16px;
      font-weight: 700;
      color: #2a2929;
    }
    .el-edit {
      display: inline-block;
      background-color: #e15536;
      width: 90px;
      height: 35px;
      align-items: baseline;
      border-radius: 5px;
      font-weight: 400;
      border: 1px solid #e15536;
      margin-right: 40px;
      margin-top: 15px;
      span {
        color: #fff;
      }
    }
    .el-edit:hover {
      background-color: #ffab98;
      border: 1px solid #ffab98;
    }
    .el-span {
      display: inline-block;
      width: 90px;
      height: 35px;
      align-items: baseline;
      border-radius: 5px;
      font-weight: 400;
      margin-right: 40px;
      margin-top: 15px;
    }
  }
}
</style>

